<template>
	<view>
		<order-info :order="order"></order-info>
		<button class="uni-button" size="mini" type="primary" style="margin: 20rpx" @click="handleAdd">
			添加
		</button>
		<uni-table border stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center">扣款原因</uni-th>
				<uni-th align="center">扣款金额</uni-th>
				<uni-th align="center">操作</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item, index) in settlementList" :key="index">
				<uni-td align="center">{{ item.deductionsFor }}</uni-td>
				<uni-td align="center">{{ item.deductionsAmount }}</uni-td>
				<uni-td>
					<view class="uni-group">
						<button class="uni-button" size="mini" type="info" @click="handleUpdate(item)">
							修改
						</button>
						<button class="uni-button" size="mini" type="warn" @click="handleDelete(item)">
							删除
						</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>

		<u-popup :show="open" @close="open = false">
			<text class="title"> 订单号：{{ order.orderNo }} </text>
			<view class="formInfo">
				<u--form
					class="item"
					label-width="100"
					labelPosition="left"
					:model="form"
					:rules="rules"
					ref="uForm">
					<u-form-item label="扣款原因:" prop="deductionsFor" required ref="deductionsFor">
						<u--input v-model="form.deductionsFor" placeholder="请选择扣款原因"></u--input>
					</u-form-item>
					<!-- <u-form-item label="扣款方式:" prop="deductionsAmount" required ref="deductionsAmount">
						<u--input v-model="form.deductionsAmount" placeholder="请选择扣款方式"></u--input>
					</u-form-item> -->
					<u-form-item label="扣款金额:" prop="deductionsAmount" required ref="deductionsAmount">
						<u--input v-model="form.deductionsAmount" placeholder="请输入扣款金额"></u--input>
					</u-form-item>
					<!-- <u-form-item label="补充金额:" prop="vehicleMileage" required ref="vehicleMileage">
						<u--input v-model="form.vehicleMileage" placeholder="是否需要补充金额"></u--input>
					</u-form-item> -->
					<view class="text-line">
						<text class="text-name">车损照片 {{ form.cheSunImage.length || 0 }}/5</text>
					</view>
					<view class="text-line">
						<sr-upload maxCount="5" @uploadResult="cheSunImageChange"></sr-upload>
					</view>
					<view class="text-line">
						<text class="text-name"
							>单据凭证照片（维修单-定损单-事故单等） {{ form.maintainImage.length || 0 }}/3</text
						>
					</view>
					<view class="text-line">
						<sr-upload maxCount="3" @uploadResult="maintainImageChange"></sr-upload>
					</view>
					<view>
						<button type="info" @click="submitForm">保&nbsp;&nbsp;存</button>
					</view>
				</u--form>
			</view>
		</u-popup>

		<button type="info" class="sub-btn" @click="overDepositSettlement">保&nbsp;&nbsp;存</button>
	</view>
</template>

<script>
	import srUpload from "@/components/upload/sr-upload.vue";
	import orderInfo from "./component/orderInfo.vue";
	import * as api from "@/api/order-api.js";
	export default {
		components: {
			srUpload,
			orderInfo,
		},
		data() {
			return {
				order: {},
				settlementList: [],
				open: false,
				form: {
					type: 1,
					deductionsWay: 1,
					cheSunImage: [],
					maintainImage: [],
				},
				title: "",
				rules: {
					fuelCapacity: {
						type: "string",
						required: true,
						message: "请填写车辆油量",
						trigger: ["blur", "change"],
					},
					vehicleMileage: {
						type: "number",
						required: true,
						message: "请填写车辆公里数",
						trigger: ["blur", "change"],
					},
					accessoryItems: {
						type: "string",
						min: 1,
						required: true,
						message: "请选择车辆随车物品",
						trigger: ["change"],
					},
					takeAlsoTime: {
						type: "string",
						min: 2,
						required: true,
						message: "请选择取车时间",
						trigger: ["change"],
					},
				},
			};
		},
		methods: {
			doDepositRefundDetail() {
				api.depositRefundDetail(this.order.orderNo).then((response) => {
					this.detail = response.data || {};
					this.shortBasic = response.data.shortBasic || {};
					this.settlementList = response.data.settlementList || [];
					console.log(response.data);
					console.log(response.data.shortBasic);
					this.loading = false;
				});
			},
			cheSunImageChange(data) {
				this.form.cheSunImage = data;
			},
			maintainImageChange(data) {
				this.form.maintainImage = data;
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id;
				api.getSettlement(id).then((response) => {
					this.form = response.data;
					this.open = true;
					this.title = "修改";
				});
			},
			/** 提交按钮 */
			submitForm() {
				// this.submitBtnLoading = true;
				// setTimeout(() => {
				// 	this.submitBtnLoading = false;
				// }, 2e3)
				// const form = this.$refs?.MmvAdd?.emitData() || {};
				this.form.orderNo = this.order.orderNo;
				if (this.form.id != null) {
					api.updateSettlement(this.form).then((response) => {
						this.$u.toast("修改成功");
						this.open = false;
						this.doDepositRefundDetail();
					});
				} else {
					api.addSettlement(this.form).then((response) => {
						this.$u.toast("新增成功");
						this.open = false;
						this.doDepositRefundDetail();
					});
				}
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id;
				api
					.delSettlement(ids)
					.then(() => {
						this.doDepositRefundDetail();
						this.$u.toast("删除成功");
					})
					.catch(() => {});
			},
			reset() {
				this.form = {
					id: null,
					type: 1,
					deductionsWay: 1,
					deductionsFor: null,
					deductionsAmount: null,
					cheSunImage: [], // 车损照片
					maintainImage: [], // 维修单据
				};
			},
			overDepositSettlement() {
				api.overDepositSettlement(this.order.orderNo).then((res) => {
					uni.$emit("refreshOrder");
					this.$u.toast("提交成功");
					uni.navigateBack({
						animationDuration: 300,
					});
				});
			},
		},
		onLoad: function (option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item;
			this.doDepositRefundDetail();
		},
	};
</script>

<style>
	.formInfo {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		background: #ffffff;
		border-radius: 18rpx;
		padding-bottom: 120rpx;
	}

	.text-name {
		width: 155rpx;
		color: #303133;
		font-size: 15px;
	}

	.text-line {
		margin: 0 20rpx 20rpx 20rpx;
	}

	.item {
		margin-bottom: 120rpx;
	}

	.checkbox-box {
		padding: 20rpx;
	}

	.checkbox-item {
		min-width: 165rpx;
		transform: scale(0.9);
	}
</style>
